<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>学习用的测试页面导航</title>
	<script src="js_lib/jquery-1.10.1.min.js"></script>
	<link rel="stylesheet" href="style_lib/base.css">
	<style>

		.sidebar{
			width:20%;
			height:100%;
			background: #3396ff;
			position:absolute;
		}
		.sidebar li {
			line-height: 30px;
			padding:0 20px;
			color:white;
			border-bottom:1px solid white;
		}
		 li a{
		 	color:inherit;
		 	font-size:1.4rem;
		 	display: block;
		 }
		 .main{
		 	margin-left:20%;
		 	position: absolute;
		 	height:100%;
		 	width:80%;
		 }
	 </style>
</head>
<body>
	<div class="sidebar">
		<ul>
			<li><a href="demo/test.html"   target="blank">test</a></li>
			<li><a href="demo/test.html"   target="blank">test</a></li>
			<li><a href="demo/test.html"   target="blank">test</a></li>
			<li><a href="demo/test.html"   target="blank">test</a></li>
		</ul>
	</div>
	
	<iframe class="main" id="iframe" src="demo/test.html" frameborder="0"></iframe>

	<!-- <section class="continer">
		<h3 class="header">zepto</h3>
		<div class="content">
			
			<a href="demo/echarts.html"   target="blank">echarts</a>
			<a href="demo/placeholder兼容.html" target="blank">placeholder兼容</a>
			<a href="demo/scrollTop.html" target="blank">scrollTop</a>
			<a href="demo/scrollTop2.html" target="blank">scrollTop2</a>
		</div>
	</section>
	<section class="continer">
		<h3 class="header">demo</h3>
		<div class="content">
			<a href="demo/test.html"   target="blank">test</a>
			<a href="demo/echarts.html"   target="blank">echarts</a>
			<a href="demo/placeholder兼容.html" target="blank">placeholder兼容</a>
			<a href="demo/scrollTop.html" target="blank">scrollTop</a>
			<a href="demo/scrollTop2.html" target="blank">scrollTop2</a>
			<a href="demo/事件相关/DOM0-level-EventListener.html" target="blank">DOM1事件及事件冒泡</a>
			<a href="show.html?show=DOM0-level-EventListener" target="blank">DOM1事件及事件冒泡</a>

		</div>
	</section>
	<section class="continer">
		<h3 class="header">jqueryLearning</h3>
		<div class="content">
			<a href="jqueryLearning/test.html" target="blank">test</a>
			<a href="jqueryLearning/index.html" target="blank">echarts</a>
			<a href="jqueryLearning/index3.html" target="blank">placeholder兼容</a>
			<a href="jqueryLearning/lazyLoadImg.html" target="blank">lazyLoadImg</a>
			<a href="jqueryLearning/qq好友分组展开.html" target="blank">qq好友分组展开</a>
			<a href="jqueryLearning/贪吃蛇呦.html" target="blank">贪吃蛇呦</a>
			<a href="jqueryLearning/模拟手机发送短信.html" target="blank">模拟手机发送短信</a>
			<a href="jqueryLearning/拖拽.html" target="blank">拖拽</a>
			<a href="jqueryLearning/弹出窗口.html"> target="blank"弹出窗口</a>
			<a href="jqueryLearning/图片放大镜.html" target="blank">图片放大镜</a>
			<a href="jqueryLearning/ajaxTest/ajaxCompleteTest.html" target="blank">ajaxComplete()</a>
		</div>
	</section> -->

	<script>
		//所有demo的链接及demo名称和所属分类
	// 	var data = {
	// 		demo:[
	// 			{
	// 				title:'事件冒泡及DOM0及事件绑定',
	// 				name:'DOM0_level_EventListener',
	// 				href:"demo/事件相关/DOM0-level-EventListener.html"
	// 			},
	// 		],
	// 		jqueryLearning:[
	// 			{
	// 				title:'test',
	// 				name:'test',
	// 				href:"jqueryLearning/test.html"
	// 			},
	// 			{
	// 				title:'echarts',
	// 				name:'echarts',
	// 				href:"jqueryLearning/index.html"
	// 			},
	// 		]
	// 	}


	// $(function(){
	// 	for(var ele in data){
	// 		// console.log(data[a])
	// 		var title = ele;
	// 		var section = $("<section class='continer'></section>");
	// 		section.append($("<h3 class='header'>"+title+"</h3>"));
	// 		var content = $("<div class='content'></div>");
	// 		section.append(content);

	// 		$.each(data[ele],function(index,value){
	// 			// console.log(value.title)
	// 			// console.log(value.name)
	// 			// console.log(value.href)
	// 			content.append($("<a href='show.html?name="+value.name+"'>"+value.title+"</a>"));

	// 		})

	// 		$("body").append(section)

	// 	}

		

	// })
	</script>
	
</body>
</html>